<template>
  <div>
    <a-cascader
      v-model:value="value"
      :options="options"
      :load-data="loadData"
      placeholder="Please select"
      change-on-select
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
interface Option {
  value: string;
  label: string;
  loading?: boolean;
  isLeaf?: boolean;
  children?: Option[];
}
export default defineComponent({
  setup() {
    const options = ref<Option[]>([
      {
        value: "zhejiang",
        label: "Zhejiang",
        isLeaf: false,
      },
      {
        value: "jiangsu",
        label: "Jiangsu",
        isLeaf: false,
      },
    ]);
    const loadData = (selectedOptions: Option[]) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          {
            label: `${targetOption.label} Dynamic 1`,
            value: "dynamic1",
          },
          {
            label: `${targetOption.label} Dynamic 2`,
            value: "dynamic2",
          },
        ];
        options.value = [...options.value];
      }, 1000);
    
    };
    console.log(options,"===============")
    // console.log(loadData,"===============")
    return {
      value: ref<string[]>([]),
      options,
      loadData,
    };
  },
});
</script>
<style scoped lang='scss'>
</style>
<style>
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
    background-color: #fff !important;
    background-image:none !important;
    border:1px solid #d9d9d9
}
.ant-select-dropdown{
    background-color: #fff !important;
    color: #222 !important;

}
</style>